<template>
<div>
  <ul>
    <li v-for="item in allList" :key="item.flashId">
      <van-card
        :num="item.flashNum"
        :price="item.flashPrice"
        :desc="item.goodsDesc"
        :title="item.goodsName"
        :thumb="item.goodsImg"
        :origin-price="item.oldPrise"
    >
      <template #tags>
        <van-tag type="warning">{{item.msg}}<van-count-down :time="item.EndTime" format="DD 天 HH 时 mm 分 ss 秒" /></van-tag>
      </template>
      <template #footer>
        <div class="box">
          <div><van-icon name="todo-list-o" size="20" /><span>只剩<span>{{item.flashStock}}</span>件</span></div>
          <div><van-button @click="goShop({status:item.flashStatus,shopId:item.shopId,shopPrice:item.flashPrice,flashId:item.flashId})" color="linear-gradient(to right, #ff6034, #ee0a24)" size="small" :disabled="item.flag">
            {{item.button}}
          </van-button></div>
        </div>
      </template>
    </van-card>
    </li>
  </ul>
</div>
</template>

<script>
export default {
name: "all",
  data(){
  return{
    time:30*60*60*1000,
    list:[],
    allList:[],
  }
  },
  mounted() {
    this.loading();
  },
  methods:{
    loading() {
      this.$axios.post('/api/flash/list', {}).then((res) => {
        this.list=res.data.data;
        let date=new  Date();
        date=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

        this.list.forEach((item)=>{
          if(item.flashStatus<3&&item.goods){
            item.goodsName=item.goods.goodsName;
            item.shopId=item.goods.goodsId;
            if(item.goods.goodsDesc){
              item.goodsDesc=item.goods.goodsDesc;
            }else {
              item.goodsDesc='【仅限成都尊贵用户享用】来自富士山天然冰雪孕育而成的神奇造物，人间美味你值得拥有 5斤/箱';
            }
            if(item.flashStatus=='0'){
              item.EndTime=this.timeDate(date,item.flashStartTime);
            }else{
              item.EndTime=this.timeDate(date,item.flashEndTime);
            }
            item.goodsImg='http://172.17.4.241:8887/upload/'+item.goods.goodsImg;
            item.oldPrise=item.flashPrice*20;
            this.allList.push(item)
          }
        });
        this.allList.forEach((item)=>{
          if (item.flashStatus=='0'){
            item.button='未开始';
            item.flag=true;
            item.msg='开抢还有';
          }else if(item.flashStatus=='1'){
            item.button='马上抢购';
            item.flag=false;
            item.msg='距离结束';
          }else if(item.flashStatus=='2'){
            item.button='已售罄';
            item.flag=true;
          }
        })
        console.log(this.allList);
      })
    },
    timeDate(startTime, endTime){
      // 开始时间
      let d1 = startTime.replace(/\-/g, "/");
      let date1 = new Date(d1);
      // 结束时间
      let d2 = endTime.replace(/\-/g, "/");
      let date2 = new Date(d2);
      // 时间相差秒数
      let dateDiff = date2.getTime() - date1.getTime();
      // 计算出相差天数
      let days = Math.floor(dateDiff / (24 * 3600 * 1000));
      // 计算出小时数
      let residue1 = dateDiff % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
      let hours = Math.floor(residue1 / (3600 * 1000));
      // 计算相差分钟数
      let residue2 = residue1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
      let minutes = Math.floor(residue2 / (60 * 1000));
      // 计算相差秒数
      let residue3 = residue2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
      let seconds = Math.round(residue3 / 1000);
      let returnVal =days*24*60*60*1000+hours*60*60*1000+minutes*60*1000+seconds*1000;
      return returnVal;
    },
    goShop(row){
      console.log(row.flashId);
      if(row.status==1){
        this.$router.push({name:'productDetails',query: {shopId:row.shopId,shopPrice:row.shopPrice,flashId:row.flashId}})
      }
    }
  },
}
</script>

<style scoped>
ul li{
  list-style-type: none;
  margin-top: 8px;
}
.van-card{
  text-align: left;
  align-content: center;
}
.van-count-down{
  color: red;
}
.box{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box>div:first-child{
  display: flex;
  align-items: center;
  width: 20%;
  justify-content: space-around;
}
.box>div:first-child>span>span{
  color: red;
}
</style>